<template>
  <div>
    <img class="HomeImg" :src="require('@/assets/logo.png')" @click="linkto('Home')"/>
    <!--      用于注册登录的弹窗-->
    <el-dialog title="登录" :visible.sync="loginVisible" :before-close="handleClose">
      <login></login>
    </el-dialog>
    <el-dialog title="注册" :visible.sync="registerVisible" :before-close="handleClose">
      <register></register>
    </el-dialog>
    <!--      用于用户选项的下拉列表-->
    <div>
      <div class="right_part">
        <el-button v-show=" ! isLogin () " type="primary" @click="registerVisible = true">注册</el-button>
        <el-button v-show=" ! isLogin () " type="primary" @click="loginVisible = true">登录</el-button>
        <!--      用于注册登录的弹窗-->
        <el-dialog title="登录" :visible.sync="loginVisible" :before-close="handleClose">
          <login></login>
        </el-dialog>
        <el-dialog title="注册" :visible.sync="registerVisible" :before-close="handleClose">
          <register></register>
        </el-dialog>
        <!--      用于用户选项的下拉列表-->
        <el-dropdown>
    <span class="el-dropdown-link" v-show="  isLogin () ">
      <i class="el-icon-user"></i>{{userID}}<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item @click.native="linkto('ShoppingCart')">我的购物车</el-dropdown-item>
            <el-dropdown-item @click.native="linkto('Information')">我的信息</el-dropdown-item>
            <el-dropdown-item @click.native="linkto('Score')">我的积分</el-dropdown-item>
            <el-dropdown-item @click.native="linkto('PurchasedItems')">已购项目</el-dropdown-item>
            <el-dropdown-item @click.native="loginOut">注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="searchModel">
        <el-input class="searchBox"
                  v-model="searchInput"
                  placeholder="请输入搜索书籍"
                  clearable>
        </el-input>
        <el-button class="searchButton" @click="search">搜索</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Login from './Register-Login/Login.vue'
import Register from './Register-Login/Register.vue'
export default {
  name: 'NavBar',
  components: {
    'login': Login,
    'register': Register
  },
  data () {
    return {
      userID: '',
      searchInput: '',
      LoginCondition: false, // use this to judge whether it have been login
      registerVisible: false,
      loginVisible: false
    }
  },
  watch: {
    LoginCondition: 'isLogin'

  },
  methods: {
    isLogin () {
      let tem = !!localStorage.getItem('isLogin')
      // console.log('aaa')
      if (tem === true) {
        // console.log('aaa')
        this.LoginCondition = true
        this.userID = localStorage.getItem('userID')
        return true
      } else {
        this.LoginCondition = false
        return false
      }
    },
    loginOut () {
      localStorage.removeItem('isLogin')
      localStorage.removeItem('userID')
      var tem = localStorage.getItem('isLogin')
      console.log(tem)
      this.LoginCondition = false
      // this.$router.replace('/Home')
      this.$router.push('/' + '/Home')
      location.reload()
    },
    handleClose () {
      this.registerVisible = false
      this.loginVisible = false
    },
    linkto (url) {
      this.$router.push('/' + url)
    },
    search () {
      // 传递searchInput
      this.$router.push({
        path: '/Search',
        query: {
          title: this.searchInput,
          from: 'search'
        }
      })
      location.reload()
    }

  }
}
</script>

<style scoped>

  .right_part{
    float:right
  }

  .searchModel{
    width: 50%;
    margin-left: 30%;
  }
  .searchBox{
    float: left;
    width: 70%;
    margin-left: 5%;
    margin-top: 5%;
  }
  .searchButton {
    float: right;
    margin-top: 5%;
  }
  .HomeImg{
    float: left;
  }
</style>
